<div class="play-panel" [class.show]="show">
  <div class="hd">

    <div class="hdc">
      <h4>播放列表（<span>{{ songList.length }}</span>）</h4>

      <div class="add-all">
        <i class="icon" title="收藏全部"></i>收藏全部
      </div>

      <span class="line"></span>

      <div class="clear-all">
        <i class="icon trush" title="清除全部"></i> 清除
      </div>

      <div class="playing-name">{{ currentSong?.name }}</div>

      <i class="icon close" (click)="onPanelClose()"></i>

    </div>
  </div>

  <div class="bd">
    <img src="//music.163.com/api/img/blur/109951163826278397" alt="" class="imgbg">

    <div class="msk"></div>

    <app-scroll class="list-wrap"
                [songList]="songList"
                (scrollEndEvent)="scrollY = $event - 0"
    >
      <ul>
        <li *ngFor="let song of songList; index as i;"
            [class.current]="currentIndex === i"
            (click)="songListItemClick(song)"
        >

          <i class="col arrow"></i>

          <div class="col name ellipsis">{{ song.name }}</div>

          <div class="col icons">
            <i class="ico like" title="收藏"></i>
            <i class="ico share" title="分享"></i>
            <i class="ico trush" title="删除"></i>
          </div>

          <div class="singers clearfix ellipsis">
            <div class="singer-item" *ngFor="let singer of song.ar; last as isLast;">
              <a href="" class="col ellipsis">{{ singer.name }}</a>
              <span [hidden]="isLast">/</span>
            </div>
          </div>

          <div class="col duration">{{ song.dt / 1000 | formatTime}}</div>
          <div class="col link"></div>

        </li>
      </ul>
    </app-scroll>

    <ul>
      歌词
    </ul>

  </div>

</div>
